<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>VISSIM仿真优化结果</title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="char_1" style="width: 100%;height: 730px;float:left;"></div>

</body>
</html>



<script type="text/javascript" src="JavaScript/qwebchannel.js"></script>
<script type="text/javascript">

    draw_pic01([0, 1]);
    window.onload = function () {
    new QWebChannel(qt.webChannelTransport, function (channel) {
        // 获取qt中绑定的交互对象
        window.pyjs_station = channel.objects.Web_Chart
        // js 绑定qt中的信号
        pyjs_station.list_send_to_js.connect(function (list) {
            var end = list.pop()
            if (end === 1){
                draw_pic01(list)
            }
        });
    });

}

function draw_pic01(list){
    // 绘制公交车速度曲线
    var myChart = echarts.init(document.getElementById('char_1'));
    var option;
    const x_coo = Array.from({length: list.length}, (a, i) => i);
    option = {
        title: {
            text: '公交车速度曲线',
            left: '10%'
        },

    xAxis: {
        type: 'category',
        data: x_coo
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: list,
        type: 'line'
    }],
    animation: false  // 取消动画
    };
    myChart.setOption(option);
}

</script>